<template>
    <div class="divs">
        <el-dropdown trigger="click" size="default" placement="top" @command="treeOperate">
            <el-button>
                树操作
                <el-icon class="el-icon--right">
                    <ArrowUp />
                </el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="checkAll">
                        全部勾选
                    </el-dropdown-item>
                    <el-dropdown-item command="uncheckAll">
                        取消勾选
                    </el-dropdown-item>
                    <el-dropdown-item command="expandAll">
                        展开所有
                    </el-dropdown-item>
                    <el-dropdown-item command="mergeAll">
                        合并所有
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <el-tree ref="tree" :data="treeData" node-key="id" :props="{ children: 'children', label: 'cname' }"
            :show-checkbox="true" style=" overflow-y: auto; max-height: 450px;" :default-expand-all="true"></el-tree>
        <div class="button-container">
            <el-button type="primary" @click="saveGrant">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import useSys from '@/store/useSys';
import request from '@/api/request';
let sys = useSys();
// 行数据
const props = defineProps(['data'])
console.log(props.data);

// 父方法
const emits = defineEmits(['close'])
// 树菜单
let treeData = ref([])
// 查询菜单列表
sys.hasPermission('system:role:grantFunction').then(resp => {
    request.get('menu/findMenuTree', {
        params: {
            cname: '系统管理' // 排除项
        }
    }).then(resp => {
        if (resp.code == 200) {
            treeData.value = resp.data

        }
    })
})

// 查询当前角色有哪些功能权限，排除菜单
let checkedPerms = ref([])
request.get('menu/getMenusByRoleId', {
    params: {
        roleId: props.data.id
    }
}).then(resp => {
    if (resp.code == 200) {
        checkedPerms.value = resp.data.map(item => item.id)
        setCheckedKeys();
    }
})

// 树形组件引用对象
let tree = ref(null)
// 加载当前角色有哪些页面权限
const setCheckedKeys = () => {
    tree.value.setCheckedKeys(checkedPerms.value, false)
}

// 保存授权
let saveGrant = () => {
    sys.hasPermission('system:role:grantFunction').then(resp => {
        let checkIds = tree.value.getCheckedKeys(); // 返回当前选中节点 key 的数组
        let halfCheckedKeys = tree.value.getHalfCheckedKeys() // 返回目前半选中的节点的 key 所组成的数组
        request.post('role/saveGrant', {
            roleId: props.data.id,
            menusId: [...checkIds, ...halfCheckedKeys]
        }, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(resp => {
            if (resp.code == 200) {
                emits('close')
            }
        })
    })
}

let treeOperate = (command) => {
    switch (command) {
        case 'checkAll':
            checkAll()
            break;
        case 'uncheckAll':
            uncheckAll()
            break;
        case 'expandAll':
            expandAll()
            break;
        case 'mergeAll':
            mergeAll()
            break;
    }
}

// 全部勾选
let checkAll = () => {
    let data = ref([treeData.value.flatMap(item => item.children.map(chiId => chiId.id))])
    tree.value.setCheckedKeys(data.value[0], false)
}

// 取消勾选
let uncheckAll = () => {
    tree.value.setCheckedKeys(ref([]).value, false)
}

// 展开所有子项
let expandAll = () => {
    const nodes = tree.value.store._getAllNodes();
    nodes.forEach(item => {
        item.expanded = true;
    });
}
// 合并所有
let mergeAll = () => {
    const nodes = tree.value.store._getAllNodes();
    nodes.forEach(item => {
        item.expanded = false;
    });
}


let close = () => {
    emits('close')
}

</script>

<style scoped>
.el-dropdown {
    margin-bottom: 16px
}
</style>
